<template>
	<view>
		<!-- #ifdef H5 -->
		<!-- <Tabbar :current="'0'"></Tabbar> -->
		<!-- #endif -->
		<!-- <view class="logo_title">
			比特数艺
		</view> -->
		<diy-component id="head" class="diy-component" v-if="showDiy" :diyItems="items"></diy-component>
		<!-- 艺术家栏目 -->
<!-- 		<scroll-view class="scroll m-top20" scroll-x="true" show-scrollbar="false" v-if="artist">
			<view class="scroll-item t-c" v-for="(item,index) in arts" :key="index" @click="toArtDetail(item.id)">
				<image :src="item.logo" mode="aspectFill"></image>
				<view class="m-top10 f-22 onelist-hidden">{{item.name.length<=6?item.name:item.name.slice(0,6)}}</view>
			</view>
		</scroll-view> -->
		<!-- 新闻栏目 -->
		<!-- <navigator url="/pages/market/index/index">123</navigator> -->
		<view class="notBox dis-flex flex-center m-top20">
			<view class="icon">
				公告:
			</view>
			<!-- <image src="../../static/images/user/icon_new.png" class="icon" mode="widthFix"></image> -->
			<swiper class="flex-box" style="height: 60rpx;" :indicator-dots="false" :autoplay="true" :vertical="true" :duration="1000">
				<swiper-item v-for="(item,index) in notice" :key="index" @click="onTargetDetail(item.article_id)">
					<view class="swiper-item">{{item.article_title}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!--艺术家藏馆 -->
		<view class="artistBox">
			
			<view class="box_container" @tap.stop.prevent="goLoginPage('/pages/article/index',false)">
				<img class="box_img" src="http://img.btcys.com/btc/platform/%E5%B9%B3%E5%8F%B0%E6%B4%BB%E5%8A%A8.png?e=1680865789&token=-ldF5C62oR_2Nbw9Zb7V-HsL9XYnEafwOpsbJBnD:xtWDklgsT-oLkVWy7jZgyh31VYw=" alt="">
				<view class="box_title">
					平台公告
				</view>
			</view>
			
			<view class="box_container" @tap.stop.prevent="goLoginPage('/pages/user/compose/index')">
				<img class="box_img" src="http://img.btcys.com/btc/platform/%E5%90%88%E6%88%90.png?e=1680865448&token=-ldF5C62oR_2Nbw9Zb7V-HsL9XYnEafwOpsbJBnD:T9j1WGyC5uaN_oVnsh-VKnKzZfE=" alt="">
				<view class="box_title">
					合成活动
				</view>
			</view>
			
			<view class="box_container" @tap.stop.prevent="goLoginPage('/pages/user/invite/index2')">
				<img class="box_img" src="http://img.btcys.com/btc/platform/%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B.png?e=1680865427&token=-ldF5C62oR_2Nbw9Zb7V-HsL9XYnEafwOpsbJBnD:qFSnvYEw3b2MzoW6X-LQvkb0Vv0=" alt="">
				<view class="box_title">
					邀请好友
				</view>
			</view>
			
			<view class="box_container" @tap.stop.prevent="goLoginPage('/pages/user/integral/index')">
				<img class="box_img" src="http://img.btcys.com/btc/platform/%E6%AF%94%E7%89%B9%E5%95%86%E5%9F%8E.png?e=1680865592&token=-ldF5C62oR_2Nbw9Zb7V-HsL9XYnEafwOpsbJBnD:uDu41z9gEV-pOBMr9iavgU1iWDM=" alt="">
				<view class="box_title">
					比特商城
				</view>
			</view>
		</view>
		<view class="artistBox2">
			<!-- <view class="box_container" @tap.stop.prevent="goLoginPage('/pages/user/compose/index')">
				<img class="box_img" src="https://img.btcys.com/btcys/2023041917364397e4c9453.png" alt="">
				<view class="box_title">
					上新兑换
				</view>
			</view> -->
			
		<!-- 	<view class="box_container" @tap.stop.prevent="goLoginPage('/pages/index/activity')">
				<img class="box_img" src="https://img.btcys.com/btcys/20230420151007771864243.png" alt="">
				<view class="box_title">
					抽奖
				</view>
			</view> -->
		</view>
		<view v-if="canIUseSaleCalendar" id="tabBox" class="tab-list-box">
			<view class="tab-list" :class="{'fixed':isTabFixed}">
				<view class="tab-item" :class="{'active':tab.current == item.id}" v-for="item in tab.list"
					:key="item.id" @tap.stop.prevent="onToggleTab(item.id)">{{item.name}}</view>
			</view>
		</view>

		<view v-if="!goods.loading || 0 < goods.list.length" class="container">
		    <!-- 藏品列表 -->
			<view v-if="tab.current == 0" class="goods-list">
				<goods :scroll-top="scrollTop" :info="item" @finished="countdownFinished"
					v-for="item in goods.list" :key="item.goods_id"></goods>
			</view>
			<!-- 发售日历 -->
<!-- 			<view v-else-if="tab.current == 1" class="goods-list">
				<sale-calendar :scroll-top="scrollTop" :info="item"
					v-for="item in goods.list" :key="item.date"></sale-calendar>
			</view> -->
			<!-- 新品特售 -->
			<view v-else-if="tab.current == 1" class="goods-list">
				<product-launch :scroll-top="scrollTop" :info="item"
					v-for="item in goods.list" :key="item.goods_id"></product-launch>
			</view>
			<!-- 精选内容 -->
			<view v-else-if="tab.current == 2" class="goods-list">
				<article-item :scroll-top="scrollTop" :info="item"
					v-for="item in goods.list" :key="item.article_id"></article-item>
			</view>
			<view v-show="goods.list.length>3 && !goods.hasMore" class="no-more f-24">
				-更多内容敬请期待-
				<view class="bsn">
					<image src="https://p6-tt.byteimg.com/origin/pgc-image/9ed074ff2e144aaca61866b159dee4bd" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<view v-if="!goods.loading && goods.list.length == 0">
			<view class="yoshop-notcont">
				<!-- <text class="dy-iconfont icon-empty"></text> -->
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">暂无数据</text>
			</view>
		</view>
		<lottery-fail-alert :show="alert.showLotteryFail" @dismiss="dismissLotteryAlert"></lottery-fail-alert>
		<lottery-success-alert :show="alert.showLotterySuccess" :info="alert.info" @dismiss="dismissLotteryAlert"
			@purchase="onPurchase"></lottery-success-alert>
		<!-- #ifndef APP-PLUS -->
			<!-- <view class="goapp" @click="goToApp">
				<view class="">
					前往APP打开 >>
				</view>
			</view> -->
		<!-- #endif -->
	</view>
	<!-- <view v-else>
		<web-view :src="url"></web-view>
	</view> -->
</template>

<script>
	import {canIUseSaleCalendar} from "@/module.js";
	import Tabbar from '@/components/tabbar/tabbar.vue'
	import productLaunch from '@/components/product-launch/product-launch';
	import articleItem from '@/components/article-item/article-item';
	import diyComponent from '@/components/diy/index';
	import lotteryFailAlert from '@/components/alert/lottery/fail.vue';
	import lotterySuccessAlert from '@/components/alert/lottery/success.vue';

	const app = getApp();

	import sceneUtils from '../../utils/sceneUtils.js';
	import siteinfo from '@/siteinfo.js';
	import {
		isWeixin
	} from '../../utils/verify.js';
	export default {
		components: {
			articleItem,
			productLaunch,
			diyComponent,
			lotteryFailAlert,
			lotterySuccessAlert,
			Tabbar
		},
		data() {
			return {
				canIUseSaleCalendar: canIUseSaleCalendar,
				scrollTop: 0,
				topDistance: 0, //当前菜单距离页面顶部距离
				isTabFixed: false, //菜单是否吸顶
				arts:[],//艺术家列表
				notice:[],//新闻列表
				tab: {
					list: [{
							id: 0,
							name: '数字藏品'
						},
						// {
						// 	id: 1,
						// 	name: '发售日历'
						// },
						// {
						// 	id: 1,
						// 	name: '新品特售'
						// }
						// ,
						// {
						// 	id: 2,
						// 	name: '新闻中心'
						// }
					],
					current: 0
				},
				// 页面参数
				options: {},
				// 页面元素
				items: {},
				loading: true,
				goods: {
					list: [],
					page: 1,
					loading: true,
					hasMore: false,
				},
				alert: {
					info: {},
					showLotteryFail: false,
					showLotterySuccess: false,
				},
				isApp:false,
				artist:false,
				url:`https://www.btcys.com/h5/?artist=2` 
			};
		},
		computed: {
			showDiy: function() {
				if (Object.prototype.toString.call(this.items) === '[object Array]') {
					return !this.loading && 0 < this.items.length;
				} 
				if (Object.prototype.toString.call(this.items) === '[object Object]') {
					return !this.loading && 0 < Object.keys(this.items).length;
				}
				return !this.loading;	
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if(options.artist){
				this.artist = true
			}
			// #ifdef APP-PLUS
			// uni.hideTabBar()
			// this.isApp = true
			// #endif
			// console.log(window.location.search)
			// 当前页面参数
			this.setData({
				options
			});
			this.getPageData();
			this.parseScene();
			this.getNotData();
			this.getArtsData()  //暂时关闭
			app.configJweixin({
				desc: '超多藏品等你来开启～'
			});
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			if (this.canIUseSaleCalendar) {
				setTimeout(() => {
					//获取tab菜单的top
					this.getTabBoxTop();
				}, 1000)	
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: siteinfo.name
			});
		},
		onShow: function() {
			this.requestNotification();
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			// let _this = this;
			return {
				// title: _this.data.page.params.share_title,
				path: '/pages/index/index?' + app.getShareUrlParams()
			};
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh: function() {
			this.goods.page = 1;

			// 发售日历清空last_time,last_time 为空表示第一页
			if (this.tab.current == 1) {
				this.goods.last_time = '';
			}
			this.getArtsData()  //下拉刷新艺术家
			this.getPageData();
		},

		onReachBottom() {
			if (!this.goods.loading && this.goods.hasMore) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > this.topDistance + uni.upx2px(152)) {
				this.isTabFixed = true
			} else {
				this.isTabFixed = false
			}
		},

		methods: {
			onCheckLogin() {
				let _this = this;
			
				if (!_this.isLogin) {
					// App.showError('很抱歉，您还没有登录');
					app.doLogin();
					return false;
				}
			
				return true;
			},
			goLoginPage(path, isCheckLogin = true) {
				// if (isCheckLogin && !this.onCheckLogin()) {
				// 	return false;
				// }
				// #ifndef APP-PLUS
				uni.navigateTo({
					url: path
				});
				// #endif
				// #ifdef APP-PLUS
				if(path == '/pages/user/invite/index'){
					uni.navigateTo({
						url: '/pages/user/invite/index1',
					});
				}else{
					uni.navigateTo({
						url: path
					});
				}
				// #endif
				
			},
			goToApp(){
				app.navigationTo('http://www.btcys.com/app/')
			},
			toArtDetail(){
				console.log("点击跳转")
				uni.navigateTo({
					 url: '/pages/art/longhair' 
				})
			},
			getTabBoxTop() {
				let _this = this;
				uni.getSystemInfo({
					success: result => {
						let query = uni.createSelectorQuery().in(this);
						query.select('#head').boundingClientRect();
						query.selectViewport().scrollOffset();
						query.exec(function(res) {
							_this.topDistance = res[0].height;
						})
					}
				})
			},
			getNotData(){
				let param = {
					page: 1,
					filter_type: 2,
					last_time: ''
				};
				app._get('page/newIndex', param, (res) => {
						if (1 == res.code) {
							this.notice=res.data.data.splice(0,3)
						}
					}
				);
			},
			onTargetDetail(id){
				uni.navigateTo({
					 url: '/pages/article/detail/index?article_id=' + id
				})
			},
			// 切换tab
			onToggleTab(id) {
				if (this.tab.current != id) {
					this.tab.current = id;
					this.goods = {
							list: [],
							page: 1,
							loading: true,
							hasMore: true,
							last_time: ''
						},
						uni.showLoading();
					this.requestData().then(() => {
						uni.hideLoading();
					})
				}
			},
			getArtsData(){
				app._get('publisher/getList', {limit:999}, (res) => {
						if (1 == res.code) {
							this.arts=res.data.data
						}
					},
					null,
					() => {
						// resolve();
						// this.goods.loading = false;
					}
				);
			},
			requestData() {
				this.goods.loading = true;
				return new Promise((resolve) => {
					let param = {
						page: this.goods.page,
						filter_type: this.tab.current ==1 ? 0 : this.tab.current,
						publisher_tpye: this.tab.current == 1 ? 2 : 1
						// last_time: this.tab.current == 1 ? this.goods.last_time : ''
					};
					app._get('page/newIndex', param, (res) => {
							if (1 == res.code) {
								// 发售日历
								// if (this.tab.current == 1) {
								// 	let {
								// 		pack_list,
								// 		last_time
								// 	} = res.data;

								// 	// 第一页数据置空
								// 	if (!this.goods.last_time) {
								// 		this.goods.list.length = 0
								// 	}

								// 	this.goods.list = [...this.goods.list, ...pack_list];
								// 	this.goods.hasMore = pack_list.length > 0;
								// 	this.goods.last_time = last_time;

								// } else {
									let data = res.data;
									let newData = [];
									if(this.tab.current == 2){
										newData = data;
									}else{
										newData = data.other_goods;
									}
                                   
									if (1 == this.goods.page) {
										this.goods.list.length = 0
									}

									this.goods.list = [...this.goods.list, ...newData.data];
									this.goods.hasMore = this.goods.list.length < newData.total;
									if (this.goods.hasMore) {
										this.goods.page++;
									}
								// }

							}
						},
						null,
						() => {
							resolve();
							this.goods.loading = false;
						}
					);
				});


			},
			/**
			 * 加载页面数据
			 */
			getPageData: function(callback) {
				Promise.all([this.requestWePageData(), this.requestData()]).then(() => {
					uni.stopPullDownRefresh();
					this.setData({
						loading: false
					});
				});
			},

			/**
			 * 解析场景值
			 */
			parseScene: function() {
				let scene = app.aj_getSceneData(this.options);
				let url = sceneUtils.getUrl(scene);
				app.navigationTo(url);
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar: function(page) {
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				}); // 设置navbar标题、颜色

				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				});
			},

			// 倒计时结束
			countdownFinished: function() {
				this.requestData();
			},

			requestWePageData: function() {
				return new Promise((resolve, reject) => {
					app._get(
						'page/index', null,
						(result) => {
							this.setData(result.data);
						},
						null,
						() => {
							resolve();
						}
					);
				});
			},
			// 关闭中奖弹窗
			dismissLotteryAlert: function() {
				this.alert.showLotterySuccess = false;
				this.alert.showLotteryFail = false;
				this.requestNotification();
			},
			// 请求通知
			requestNotification: function() {
				setTimeout(() => {
					app._get('lottery/lotteryNotice', null, (res) => {
						if (res.data.status) {
							this.alert.info = res.data;
							//status：10是中签 20是未中签
							this.alert.showLotterySuccess = 10 == res.data.status;
							this.alert.showLotteryFail = 20 == res.data.status;
						}
					});
				}, 1000);
			},
			onPurchase: function(goods_id) {
				this.alert.showLotterySuccess = false;
				app.navigationTo(`pages/goods/index?goods_id=${goods_id}`);
			}
		}
	};
</script>
// <style lang="scss">
// 	//手机主题为深色/夜晚时
// 	@media(prefers-color-scheme:dark){
// 		page,
// 		body {
// 			background: $uni-bg-color!important;
// 			// background: #fff!important;
// 		}
// 	}
// 	//手机主题为浅色/白天时
// 	@media(prefers-color-scheme:light){
		page,
		body {
			background: $uni-bg-color!important;
			// background: #fff!important;
		}
// 	}
	
// </style>
<style lang="scss" scoped>
	.scroll {
		width: 100%;
		color: #f5f5f5;
		white-space: nowrap;
	}
	.scroll-item {
		width: 160rpx;
		margin-left: 36rpx;
		display: inline-block;
	}
	.scroll-item:first-child{
		margin-left: 20px;
	}
	.scroll-item:last-child{
		margin-right: 20px;
	}
	.scroll-item image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.container {
		padding: 0 40rpx 40rpx;
	}

	.diy-component {
		display: block;
		background: $uni-bg-color;
		padding-top: 40rpx;
	}
	.bsn{
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
	.bsn image{
		width: 200rpx;
	}
	.notBox{
		height: 80rpx;
		line-height: 60rpx;
		padding: 0 20px;
		color: #f5f5f5;
		font-size: 24rpx;
		background-color: rgba(213, 177, 90, 0.1);
		margin: 0 32rpx;
		border-radius: 8rpx;
		
		font-size: 28rpx;
		font-weight: 400;
		color: #D6B05A;
	}
	.notBox .icon{
		width: 105rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background-image: url(@/static/images/noticeText.png);
		background-color: #EE772B;
		background-size: 100% 100%;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		
	}
	.tab-list-box {
		position: relative;
		height: 80rpx;
	}

	.tab-list {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 20rpx;
		padding-top: 50rpx;
	}

	.tab-list.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: $uni-bg-color;
		z-index: 9;
	}

	.tab-item {
		padding: 0 32rpx;
		font-size: 30rpx;
		color: $uni-text-color-grey;
	}

	.tab-item.active {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-text-color-inverse;
	}
	.goods-list {
		margin-top: 40rpx;
	}
	.artistBox{
		margin: 0 62rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		
	}
	.artistBox2{
		margin: 0 62rpx;
		margin-top: 32rpx;
		display: flex;
		// justify-content: space-between;
		
	}
	.artistBox-left{
		position: relative;
	}
	.artistBox-left image{
		width: 356rpx;
		height: 264rpx;
	}
	.artistBox-top-text{
		
	}
	.artistBox-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.artistBox-top{
		position: relative;
	}
	.artistBox-top-text{
		position: absolute;
		top: 16rpx;
		left: 18rpx;
		z-index: 11;
		
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		background: linear-gradient(360deg, #526EF2 0%, #EDF0FE 70%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.artistBox-top image{
		width: 310rpx;
		height: 122rpx;
	}
	.artistBox-bottom{
		position: relative;
	}
	.artistBox-bottom image{
		width: 310rpx;
		height: 122rpx;
	}
	.activities{
		// height: 100rpx;
		margin: 32rpx 0 32rpx 32rpx;
		color: #fff;
	}
	.goapp{
		position: fixed;
		width: 300rpx;
		left: 50%;
		margin-left: -170rpx;
		bottom: 120rpx;
		color: #000000;
		z-index: 999;
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		background-color: #2E5DD3;
		background: url("../../static/bg1.jpg") repeat fixed center;
		background-size: contain;
		opacity: 0.8;
		border-radius: 60rpx;
	}
	.box_container{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 35rpx;
		.box_img{
			width: 80rpx;
			border-radius: 50%;
		}
		.box_title{
			font-size: 28rpx;
		}
	}
	.logo_title{
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		font-size: 38rpx;
		color: #E3742E;
		font-weight: 600;
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	}
</style>
